package com.example.healthinfo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.healthinfo.ui.theme.HealthInfoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HealthInfoTheme {
                val navController = rememberNavController()
                Scaffold(
                    modifier = Modifier.fillMaxSize()
                ) { innerPadding ->
                    Box(modifier = Modifier.fillMaxSize()) {
                        NavHost(navController, startDestination = "home", Modifier.padding(innerPadding)) {
                            composable("home") { HealthInfoScreen() }
                            composable("monitor") { MonitorScreen() }
                            composable("store") { StoreScreen() }
                        }
                        BottomFloatingButtons(navController, Modifier.align(Alignment.BottomCenter))
                    }
                }
            }
        }
    }
}

@Composable
fun HealthInfoScreen(modifier: Modifier = Modifier) {
    val scrollState = rememberScrollState()
    Column(
        modifier = modifier
            .fillMaxSize()
            .background(Color(0xFFE0F7FA)) // Light background color
            .padding(16.dp)
            .verticalScroll(scrollState),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(
            text = "Personal Health Info",
            modifier = Modifier
                .padding(bottom = 16.dp)
                .fillMaxWidth(),
            style = TextStyle(
                color = Color(0xFF00838F),
                fontSize = 28.sp,
                fontFamily = androidx.compose.ui.text.font.FontFamily.SansSerif,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center,
                fontStyle = androidx.compose.ui.text.font.FontStyle.Normal,
            )
        )

        Text(
            text = "⭐ Starred",
            modifier = Modifier
                .padding(bottom = 8.dp)
                .fillMaxWidth(),
            style = TextStyle(
                color = Color.Red,
                fontSize = 20.sp,
                fontFamily = androidx.compose.ui.text.font.FontFamily.SansSerif,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Left,
                fontStyle = androidx.compose.ui.text.font.FontStyle.Normal,
            )
        )

        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            HealthInfoCard(title = "Height", value = "180 CM", modifier = Modifier.fillMaxWidth())
            HealthInfoCard(title = "Weight", value = "75 KG", modifier = Modifier.fillMaxWidth())
            HealthInfoCard(title = "Heart Rate", value = "70 bpm", modifier = Modifier.fillMaxWidth())
            HealthInfoCard(title = "Blood Pressure", value = "110 / 70  mmHg", modifier = Modifier.fillMaxWidth())
            HealthInfoCard(title = "Steps", value = "12000", modifier = Modifier.fillMaxWidth())
        }

        Text(
            text = "\uD83D\uDCC8 Browse",
            modifier = Modifier
                .padding(bottom = 8.dp, top = 16.dp)
                .fillMaxWidth(),
            style = TextStyle(
                color = Color.Red,
                fontSize = 20.sp,
                fontFamily = androidx.compose.ui.text.font.FontFamily.SansSerif,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Left,
                fontStyle = androidx.compose.ui.text.font.FontStyle.Normal,
            )
        )

        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            HealthInfoCard(title = "Breathe", value = "10.5 tps", modifier = Modifier.fillMaxWidth())
            HealthInfoCard(title = "Sleeping Time", value = "10.5 Hours", modifier = Modifier.fillMaxWidth())
            HealthInfoCard(title = "Training Time", value = "1 Hour", modifier = Modifier.fillMaxWidth())
            HealthInfoCard(title = "Blood Sugar", value = "100 mg/dL", modifier = Modifier.fillMaxWidth())
        }
    }
}

@Composable
fun HealthInfoCard(title: String, value: String, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier.height(70.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(containerColor = Color.White),
    ) {
        Column(
            modifier = Modifier.padding(8.dp),
        ) {
            Text(
                text = title,
                modifier = Modifier.padding(bottom = 8.dp, start = 18.dp),
                style = TextStyle(
                    fontWeight = FontWeight.Bold,
                    fontSize = 20.sp, // Larger font size for title
                    color = Color(0xFFFFA500) // Orange color for title
                )
            )
            Text(
                text = value,
                modifier = Modifier.padding(start = 18.dp),
                style = TextStyle(
                    fontWeight = FontWeight.Normal,
                    fontSize = 18.sp, // Larger font size for value
                    color = Color.Black
                )
            )
        }
    }
}

@Composable
fun MonitorCard(title: String,  modifier: Modifier = Modifier) {
    Card(
        modifier = modifier.height(70.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(containerColor = Color.White),
    ) {
        Row(
            modifier = Modifier
                .padding(8.dp)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column {
                Text(
                    text = title,
                    modifier = Modifier.padding(bottom = 8.dp, start = 18.dp),
                    style = TextStyle(
                        fontWeight = FontWeight.Bold,
                        fontSize = 20.sp, // Larger font size for title
                        color = Color(0xFF3B6426) // Different color for title
                    )
                )

            }
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .size(50.dp)
                    .border(2.dp, Color.Black, shape = CircleShape)
            ) {
                IconButton(
                    onClick = { /* Handle start button click */ },
                    modifier = Modifier.size(40.dp)
                ) {
                    Icon(
                        imageVector = Icons.Default.PlayArrow,
                        contentDescription = "Start",
                        tint = Color.Black,
                        modifier = Modifier.size(30.dp)
                    )
                }
            }
        }
    }
}



@Composable
fun BottomFloatingButtons(navController: NavHostController, modifier: Modifier = Modifier) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = { navController.navigate("monitor") }) {
            Text(text = "M", style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold))
            Text(text = "onitor", style = TextStyle(fontSize = 16.sp))
        }
        Button(onClick = { navController.navigate("home") }) {
            Text(text = "M", style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold))
            Text(text = "e", style = TextStyle(fontSize = 16.sp))

        }
        Button(onClick = { navController.navigate("store") }) {
            Text(text = "M", style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold))
            Text(text = "store", style = TextStyle(fontSize = 16.sp))
        }
    }
}

@Composable
fun MonitorScreen(modifier: Modifier = Modifier) {
    val scrollState = rememberScrollState()
    Column(
        modifier = modifier
            .fillMaxSize()
            .background(Color(0xFFF0E68C)) // Different background color
            .padding(16.dp)
            .verticalScroll(scrollState),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(
            text = "Monitor",
            modifier = Modifier
                .padding(bottom = 16.dp)
                .fillMaxWidth(),
            style = TextStyle(
                color = Color(0xFF6B8E23), // Different text color
                fontSize = 28.sp,
                fontFamily = androidx.compose.ui.text.font.FontFamily.SansSerif,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center,
                fontStyle = androidx.compose.ui.text.font.FontStyle.Normal,
            )
        )

        Text(
            text = "⭐ Starred",
            modifier = Modifier
                .padding(bottom = 8.dp)
                .fillMaxWidth(),
            style = TextStyle(
                color = Color(0xFF1A7B94),
                fontSize = 20.sp,
                fontFamily = androidx.compose.ui.text.font.FontFamily.SansSerif,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Left,
                fontStyle = androidx.compose.ui.text.font.FontStyle.Normal,
            )
        )

        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            MonitorCard(title = "血氧检测",  modifier = Modifier.fillMaxWidth())
            MonitorCard(title = "体温测量",  modifier = Modifier.fillMaxWidth())
            MonitorCard(title = "心率检测",  modifier = Modifier.fillMaxWidth())
            MonitorCard(title = "足压检测",  modifier = Modifier.fillMaxWidth())
        }

        Text(
            text = "\uD83D\uDCC8 Browse",
            modifier = Modifier
                .padding(bottom = 8.dp, top = 16.dp)
                .fillMaxWidth(),
            style = TextStyle(
                color = Color(0xFF1A7B94),
                fontSize = 20.sp,
                fontFamily = androidx.compose.ui.text.font.FontFamily.SansSerif,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Left,
                fontStyle = androidx.compose.ui.text.font.FontStyle.Normal,
            )
        )

        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            MonitorCard(title = "心电检测",  modifier = Modifier.fillMaxWidth())
            MonitorCard(title = "荧光免疫定量检测",  modifier = Modifier.fillMaxWidth())
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun StoreScreen(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .background(Color(0xFFE0F7FA)) // Light blue background
            .padding(16.dp)
    ) {
        // Search bar
        TextField(
            value = "",
            onValueChange = {},
            placeholder = { Text("Search") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp)
                .background(Color(0xFFDCD9D7), RoundedCornerShape(8.dp)) // Light gray background
                .border(1.dp, Color(0xFFDCD9D7), RoundedCornerShape(8.dp))
                .padding(horizontal = 16.dp, vertical = 12.dp),
            colors = TextFieldDefaults.textFieldColors(
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            )
        )

        // Product grid
        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            for (i in 1..3) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    for (j in 1..2) {
                        ProductCard()
                    }
                }
            }
        }
    }
}

@Composable
fun ProductCard(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
            .width(150.dp)
            .background(Color.Transparent, RoundedCornerShape(8.dp)) // Transparent background
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Placeholder for product image
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.LightGray, RoundedCornerShape(8.dp))
        )

        // Product name
        Text(
            text = "Product Name",
            modifier = Modifier.padding(top = 8.dp),
            style = TextStyle(
                fontWeight = FontWeight.Bold,
                fontSize = 16.sp,
                color = Color.Black,
            ),
            textAlign = TextAlign.Center
        )

        // Purchase button
        Button(
            onClick = { /* Handle purchase */ },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFE96806)), // Light blue color
            modifier = Modifier.padding(top = 8.dp)
        ) {
            Text("Buy")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun HealthInfoScreenPreview() {
    HealthInfoTheme {
        StoreScreen()
    }
}